<template>
  <view class="goods-list-container">
    <!-- 顶部搜索和筛选 -->
    <view class="fixed-top">
      <div class="search-container">
        <div class="search-box">
          <text class="search-icon">🔍</text>
          <input
            type="text"
            class="search-input"
            placeholder="请输入商品名称搜索"
            placeholder-class="placeholder"
            confirm-type="search"
            v-model="query.goods_name"
            @blur="searchGoods"
            clearable
          />
        </div>
      </div>

      <!-- 商品类型切换栏 -->
      <view class="type-switcher">
        <view
          class="type-item"
          :class="{ active: query.type === 1 }"
          @click="switchType(1)"
        >
          自营商品
        </view>
        <view
          class="type-item"
          :class="{ active: query.type === 2 }"
          @click="switchType(2)"
        >
          品牌商品
        </view>
      </view>
    </view>

    <!-- 商品列表 -->
    <scroll-view
      scroll-y
      class="goods-scroll"
      @scrolltolower="loadMore"
      :style="{ width: windowWidth - 22 + 'px' }"
    >
      <view class="goods-item" v-for="(item, index) in goodsList" :key="index">
        <!-- 商品信息 -->
        <view class="goods-info">
          <image class="goods-image" :src="item.cover" mode="fill"></image>
          <view class="goods-detail">
            <view class="goods-title">{{ item.goods_name }}</view>
            <view class="goods-price">
              <view class="goods-meta">
                <text>品牌：{{ item.brand_name }}</text>
                <text>分类：{{ item.category_name }}</text>
                <text
                  >排序：<text
                    @click="setBrandGoodsSortDialog(item)"
                    class="sort-text"
                    >{{ item.sort }}</text
                  ></text
                >
              </view>
              <view :style="{ color: statusMap(item.status).color }">
                {{ statusMap(item.status).name }}
              </view>
            </view>
          </view>
        </view>

        <!-- 操作按钮 -->
        <view class="goods-actions">
          <button
            v-if="item.status === 2 || item.status === 4"
            :class="['action-btn']"
            :style="{
              color: statusMap(item.status).color,
              border: '1rpx solid #52c41a',
              background: '#fff',
            }"
            @click="toggleStatus(item)"
          >
            {{ statusMap(item.status).showName || statusMap(item.status).name }}
          </button>
          <button
            class="action-btn btn-view"
            @click="viewDetail(item)"
            style="background-color: #409eff; color: #fff"
          >
            查看详情
          </button>
          <button
            class="action-btn btn-view"
            @click="openModal(item)"
            v-if="item.status === 3"
          >
            查看原因
          </button>
        </view>
      </view>

      <div v-if="goodsList.length === 0" class="empty-order">
        <gui-image
          src="https://cdn.duyumy.com/accessory/0fe61301ec884459440a85e2fcd72d1ae98c46da.png"
        ></gui-image>
        <div style="font-size: 28rpx; color: #999; margin-top: -20rpx">
          暂无商品~
        </div>
      </div>
    </scroll-view>

    <!-- 弹窗：审核原因 -->
    <view class="modal-overlay" v-if="showModal" @click="closeModal">
      <view class="modal-content" @click.stop>
        <view class="modal-title">审核原因</view>
        <view class="modal-body">
          <text> {{ audit_remarks }}</text>
        </view>
        <!-- 底部圆形关闭按钮 -->
        <view class="close-circle" @click="closeModal">
          <text class="close-icon">×</text>
        </view>
      </view>
    </view>

    <gui-modal
      ref="sortPopup"
      title="排序设置"
      isCloseBtn
      titleStyle="line-height:100rpx; font-size:40rpx;color:white;"
    >
      <view class="gui-radio-lable" slot="content">
        <view style="min-height: 140rpx">
          <span class="set-item"
            >排序值：<input
              style="border-bottom: 0.5px solid #fdeded; padding: 0 5px"
              type="number"
              v-model="sortCount.sort"
              placeholder="请输入排序值"
          /></span>
        </view>
      </view>
      <view
        slot="btns"
        class="gui-flex gui-align-items-center gui-justify-content-center gui-border-t height"
      >
        <button class="gui-btn cancel" @click="cancel">取消</button>
        <button class="gui-btn success" @click="setSort">确定</button>
      </view>
    </gui-modal>
  </view>
</template>

<script setup>
import { ref, reactive } from "vue";
import {
  getGoodsList,
  setGoodsStatus,
  setBrandGoodsSort,
} from "@/apiShop/goods";
import { onShow } from "@dcloudio/uni-app";
import { showToast } from "@/utils/helper";
const query = reactive({
  page: 1,
  limit: 10,
  brand_id: 0,
  category_id: 0,
  goods_name: "",
  type: 1,
});
const sortCount = ref({
  sort: 0,
  id: undefined,
});
const sortPopup = ref(null);
const windowWidth = ref(getApp().globalData.systemInfo.screenWidth);
const audit_remarks = ref("");
const statusMap = (status) => {
  switch (status) {
    case 1:
      return {
        name: "待审核",
        color: "#42a5f5",
      };
    case 2:
      return {
        name: "上架中",
        showName: "下架",
        color: "#52c41a",
      };
    case 3:
      return {
        name: "审核不通过",
        color: "red",
      };
    case 4:
      return {
        name: "下架中",
        showName: "上架",
        color: " #999",
      };
    default:
      return {
        name: "未定义",
        showName: "未定义",
        color: " #ccc",
      };
  }
};

const getGoodsListData = async (type = "init") => {
  const { data } = await getGoodsList(query);
  if (data.length === 0) return showToast("没有更多数据了");
  if (type === "init") return (goodsList.value = data);
  goodsList.value = [...goodsList.value, ...data];
};

// 商品列表数据
const goodsList = ref([]);

// 控制弹窗显示
const showModal = ref(false);

// 切换商品状态（上架/下架）
const toggleStatus = async (item) => {
  //是否上下架的弹窗
  uni.showModal({
    title: "提示",
    content: "是否要操作该商品？",
    success: async (res) => {
      if (res.confirm) {
        await setGoodsStatus({
          id: item.id,
          status: item.status === 2 ? 4 : 2, // 1 上架 2 下架
        });
        getGoodsListData();
      }
    },
  });
};

// 查看商品详情
const viewDetail = (item) => {
  uni.navigateTo({
    url: `/pagesShop/goods/goodsInfo?id=${item.id}`,
  });
};

// 打开弹窗
const openModal = (item) => {
  audit_remarks.value = item.audit_remarks || "未知报错信息";
  showModal.value = true;
};

// 关闭弹窗
const closeModal = () => {
  showModal.value = false;
};
const loadMore = () => {
  query.page++;
  getGoodsListData("more");
};

const searchGoods = async () => {
  query.page = 1;
  const { data } = await getGoodsList(query);
  goodsList.value = data;
};

const setBrandGoodsSortDialog = (item) => {
  // 弹出一个带有输入框的model弹窗
  sortPopup.value.open();
  sortCount.value.sort = item.sort;
  sortCount.value.id = item.id;
};

const cancel = () => {
  sortCount.value.sort = 0;
  sortCount.value.id = undefined;
  sortPopup.value.close();
};

const setSort = async () => {
  await setBrandGoodsSort({
    id: sortCount.value.id,
    sort: sortCount.value.sort,
  });
  sortPopup.value.close();
  await getGoodsListData();
  showToast("排序成功");
};

const switchType = async (type) =>{
  query.type = type;
  query.page = 1;
  goodsList.value = [];
  await getGoodsListData();
}

onShow(async () => {
  await getGoodsListData();
});
</script>

<style scoped lang="scss">
.goods-list-container {
  background-color: #f5f5f5;
  /* min-height: 100vh; */
  position: relative;
  padding-top: 170rpx; /* 为固定顶部预留空间 */
}

/* 固定在顶部的区域 */
.fixed-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: #fff;
}

/* 商品列表 */
.goods-list {
  padding: 20rpx;
}

.goods-item {
  background-color: #fff;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}

.goods-info {
  display: flex;
  padding: 20rpx;
  border-bottom: 1px solid #f0f0f0;
  position: relative;
}

.goods-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 8rpx;
}

.goods-detail {
  flex: 1;
  padding: 0 20rpx;
}

.goods-title {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
  line-height: 1.4;
}

.goods-price {
  font-size: 30rpx;
  color: #ff4d4f;
  font-weight: bold;
  margin-bottom: 15rpx;
  display: flex;
  justify-content: space-between;
}

.goods-meta {
  display: flex;
  flex-direction: column;
  font-size: 24rpx;
  color: #999;
}

.goods-meta text {
  margin-bottom: 5rpx;
}

.goods-status {
  font-size: 28rpx;
  color: #fff;
}

/* 操作按钮 */
.goods-actions {
  display: flex;
  justify-content: flex-end;
  padding: 15rpx 20rpx;
  gap: 20rpx;
}

.action-btn {
  min-width: 140rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  font-size: 24rpx;
  border-radius: 30rpx;
  padding: 0 30rpx;
  margin: 0;
}

.btn-online {
  background-color: #1890ff;
  color: #fff;
}

.btn-offline {
  background-color: #ff4d4f;
  color: #fff;
}

.btn-view {
  background-color: #f5f5f5;
  color: #666;
}

/* 底部圆形关闭按钮 */
.close-circle {
  position: fixed;
  bottom: 40rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 80rpx;
  height: 80rpx;
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  z-index: 10;
  top: 66%;
}

.close-icon {
  font-size: 40rpx;
  color: #999;
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.modal-content {
  width: 560rpx;
  background-color: #fff;
  border-radius: 10rpx;
  overflow: hidden;
}

.modal-title {
  text-align: center;
  font-size: 32rpx;
  padding: 30rpx 0;
  font-weight: bold;
}

.modal-body {
  padding: 30rpx;
  text-align: center;
  color: #666;
  font-size: 28rpx;
  min-height: 95rpx;
}
.goods-scroll {
  height: calc(97vh - 170rpx);
  padding: 20rpx;
}

.set-item {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10rpx;
}

.cancel {
  padding: 10rpx;
  flex: 1;
  background-color: #fff;
  color: #333;
}
.success {
  flex: 1;
  padding: 10rpx;
  background-color: #fff;
  color: #3399ff;
}
.sort-text {
  color: #999;
  cursor: pointer;
  border-bottom: 1px solid #999;
}

.search-container {
  padding: 20rpx;
  background-color: #fff;
  .search-box {
    display: flex;
    align-items: center;
    height: 72rpx;
    background-color: #f5f5f5;
    border-radius: 36rpx;
    padding: 0 30rpx;
    .search-icon {
      font-size: 32rpx;
      color: #999;
      margin-right: 10rpx;
    }
    .search-input {
      flex: 1;
      height: 72rpx;
      font-size: 28rpx;
      color: #333;
      background-color: transparent;
    }

    .placeholder {
      color: #999;
      font-size: 28rpx;
    }
  }
}
.empty-order {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80vh;
  flex-direction: column;
}

/* 类型切换栏 */
.type-switcher {
  display: flex;
  background-color: #fff;
  border-bottom: 1rpx solid #f0f0f0;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.type-item {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  font-size: 28rpx;
  color: #666;
  position: relative;
}

.type-item.active {
  color: #409eff;
  font-weight: bold;
}

.type-item.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 4rpx;
  background-color: #409eff;
  border-radius: 2rpx;
}

</style>
